<template>
	<view class="main">
		<view>
			<view style="height: 20rpx;position: relative;z-index: 99;background: #F2F2F2;"></view>
			<view class="card">
				<view class="card-list flex flex-ai-c">
					<view class="card-title">提现金额</view>
					<view>（余额：<text class="font-32"
							style="color: #666666;font-weight: bold;">{{info.userinfo.money}}</text>）</view>
				</view>

				<view class="card-list card-list-price flex flex-ai-c" style="padding: 0 20rpx;height: 148rpx;">
					<view style="background: rgba(238,239,240,0.3);padding: 0 40rpx;border-radius: 6rpx"
						class="flex flex-ai-c flex-jc-sb f1">
						<view class="flex flex-ai-c">
							<text style="color: #000;margin-right: 20rpx;">¥</text>
							<view>
								<u-input v-model="info.withdrawalMoney" type="digit" :placeholder="info.text"></u-input>
							</view>
						</view>
						<view style="color: #000;" class="font-32 font-bold" @click="handleAll">全部</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card-title card-list flex flex-ai-c" style="font-size: 32rpx;">
					提现须知
				</view>
				<view class="text">
					<rich-text user-select :selectable="true" :nodes="info.incomeRule"></rich-text>
				</view>
			</view>
		</view>
		<view class="flex flex-jc-c" style="padding-top: 100rpx;">
			<view @click="withdrawal" class="buttonConfirm">提 交</view>
		</view>
		<!-- <view v-if="info.show" style="background: rgba(0,0,0,0.5);width: 100%;height: 100%;
		position: absolute;top: 0;z-index: 1;" @click="info.show = false"></view> -->
	</view>
</template>

<script setup lang="ts">
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import user from '../../api/user'
	import common from '../../api/common'
	let info = reactive({
		text: '最低提现10.00元',
		show: false,
		withdrawalMoney: null,
		tempFilePaths: '',
		userinfo: { money: 0 },
		dateList: [],
		select: {},
		domain_url: '',
		incomeRule: '',
		min_withdraw_amount: 10,
		max_withdraw_amount: 500
	})
	const withdrawal = async () => {
		if ((Number(info.withdrawalMoney) < Number(info.min_withdraw_amount)) || (info.withdrawalMoney > info.userinfo.money) || (info.withdrawalMoney > info.max_withdraw_amount)) return uni.showToast({
			title: `请输入正确的提现金额范围在（${info.min_withdraw_amount} - ${info.max_withdraw_amount}）`,
			icon: 'none'
		})
		const res = await user.withdrawal({
			money: info.withdrawalMoney
		})
		if (res.code === 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'none'
			})
			getMemberInfo()
		}

	}
	const revenueRule = async () => {
		const res = await common.withdrawalNotice()
		info.incomeRule = res.data.withdrawal_notice
		info.min_withdraw_amount = res.data.withdrawal_min_money || 10
		info.max_withdraw_amount = res.data.withdrawal_max_money || 500
		info.text = `最低提现${info.min_withdraw_amount || 10}元`
	}

	const handleAll = () => {
		info.withdrawalMoney = info.userinfo.money
	}
	const getMemberInfo = async () => {
		const res = await user.getMemberInfo()
		info.userinfo = res.data
		// info.userinfo.money = 50
	}
	onLoad(() => {
		getMemberInfo()
		revenueRule()
	})
</script>
<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.buttonConfirm {
		width: 616rpx;
		height: 80rpx;
		background: #009943;
		border-radius: 40rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		color: #FFFFFF;
		line-height: 80rpx;
	}

	:deep(.u-input) {
		border: 0;
	}

	.main {

		.card {
			background: #fff;

			.text {
				padding: 30rpx 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				user-select: text;
				-webkit-user-select: text
			}

			.card-list {
				padding: 0 40rpx;
				height: 108rpx;
				border-bottom: 1rpx solid #D8D8D8;
				background: #fff;

				.card-list-price {
					font-size: 32rpx;
				}
			}

			.card-title {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>